<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系部管理</title>
    <style>
        .container .kc {
            background-color: #f5f5f5;
        }

        /* .card.col-md-4.ms-3.mt-3:hover{
            background: rgb(241, 240, 240);
        }
        .card.col-md-4.ms-3.mt-3 .mt-1.text-muted:hover,.card.col-md-4.ms-3.mt-3 .card-title:hover{
            color: rgb(97, 172, 172) !important;
        } */
        .link-secondary:hover {
            color: #0d6efd !important;
        }

        .leftmenu {
            min-height: 100vh;
        }

        #tbody td img {
            max-width: 120px;
        }
    </style>
</head>

<body>
    <!-- container是bootstrap的居中窄的显示方案 -->
    <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu"></div>
            <div class="col-md-9 col-xs-12 kc ms-3">
                <div class="row mt-3 pb-1 border-bottom border-secondary">
                    <div class="col-md-2">系部管理</div>
                    <div class="col-md-2 offset-md-8">
                        <a class="nav-link link-success" href="../teacher/depart.creat.html">
                            <i class="bi bi-plus-circle-fill"></i>
                            添加系部
                        </a>
                    </div>
                </div>
                <div class="row mt-3">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>系部名称</th>
                                <th>系部编号码</th>
                                <th>学校编号码</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                            <!-- <tr>
                                <td>1</td>
                                <td>02</td>
                                <td>22级移动应用</td>
                                <td>17</td>
                                <td>2022-09-10</td>
                                <td>
                                    <button class="btn btn-sm btn-success">编辑</button>
                                    <button class="btn btn-sm btn-danger">删除</button>
                                </td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function () {
            $.get("http://unicloud.codecore.cn/ms/departs",{},function (params) {
                if (params.errCode == 0) {
                    let data =params.data;
                    for (let i = 0; i < data.length; i++) {
                        let elem=data[i]
                        $("#tbody").append($(`<tr>
                                <td>1</td>
                                <td>${elem.department_name}</td>
                                <td>${elem.department_code}</td>
                                <td>${elem.school_code}</td>
                                <td>${elem.create_time}</td>
                                <td>
                                    <button class="btn btn-sm btn-success" data-id="${elem._id}">编辑</button>
                                    <button class="btn btn-sm btn-danger" data-id="${elem._id}">删除</button>
                                </td>
                            </tr>`))
                    }
                }
            })
            $("#tbody").delegate("button.btn-danger", "click", function () {
                // $(this).data() 获取点击元素上data属性中存放的数据
                let data = $(this).data();// data数据格式是{id:"字符串"} 比较符合后端要求 可以直接传递
                $.post("http://unicloud.codecore.cn/ms/departRemove", data, function (params) {
                    console.log(params);
                    if (params.errCode == 0) {
                        location.reload()
                    } else { alert("删除异常") }
                })
            });

            $("#tbody").delegate("button.btn-success","click",function () {
                let data =$(this).data();
                location.href=`./depart_edit.html?id=${data.id}`
            })
        })
    </script>
</body>

</html>